<template>
    <view class="cu-card article" @click="clickCard">
        <view class="cu-item shadow" :class="['bg-'+ (gradual?'gradual-':'') + bgColor, light?'light':'']">
            <header class="title" :class="[titleLarge?'wecard-title-lg':'']">
                <slot name="title"></slot>
            </header>
            <main class="content">
                <slot name="content"></slot>
            </main>
            <footer class="wecard-feature">
                <view class="wecard-icon text-xxl" v-if="iconName" @click.stop="clickIcon">
                    <text :class="['cuIcon-'+iconName]"></text>
                </view>
                
                <button v-if="buttonName" class="cu-btn shadow" @click.stop="clickButton"
                :class="[buttonColor?'bg-'+buttonColor:'']">{{buttonName}}
                </button>
                
                <view class="wecard-tag-group padding-top-xs align-center" v-if="tags">
                    <view v-for="(tag, index) in tags"
                    :key="index"
                    class="cu-tag round light"
                    :class="['bg-'+(tag.color?tag.color:'green'), smTag?'sm':'']">{{tag.content}}</view>
                </view>
            </footer>
            
            <view class="wecard-footer">
                <slot name="footer"></slot>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            bgColor: {
                type:String,
                default:'white'
            },
            light: {
                type: Boolean,
                default: false
            },
            gradual:{
                type: Boolean,
                default: false
            },
            iconName: {
                type:String,
                default:''
            },
            buttonName:{
                type: String,
                default: ''
            },
            buttonColor:{
                type: String,
                default: 'green'
            },
            titleLarge: {
                type: Boolean,
                default: false
            },
            smTag:{
                type: Boolean,
                default: true
            },
            tags:{
                type: Array,
                default: null
            }
        },
        data() {
            return {

            };
        },
        methods: {
            clickCard: function() {
                this.$emit('click');
            },
            clickButton: function(){
                this.$emit('click-button')
            },
            clickIcon: function(){
                this.$emit('click-icon')
            }
        }
    }
</script>

<style>
    @import url("@/components/weapp-card/weapp-card.css");
</style>
